import React, { useState,useContext } from 'react'
import Header from '../../components/Header/Header'
import {Button,Form, Input, Toast} from 'antd-mobile'
import { reqlogin } from '../../http/api'
import { MyContext } from '../../App'
import {actions } from '../../reducer/app'
export default function Login(props) {
  const [user,setUser]=useState({
    phone:'',
    password:''
  })
  const {dispatch}=useContext(MyContext);

  const doLogin=()=>{
    reqlogin(user).then(res=>{
      if(res.data.code===200){
        Toast.show({
          content:res.data.msg
        })
        //存信息
        dispatch(actions.changeUserInfo(res.data.list));
        //跳转
        props.history.push('/index/home');
      }
    })
  }
  return (
    <div>
      <Header register title='登录'></Header>
      <div>user:{JSON.stringify(user)}</div>
      <Form layout='horizontal'>
        <Form.Item label='用户名' name='username'>
          <Input placeholder='请输入用户名' clearable onChange={(v)=>setUser({...user,phone:v})}/>
        </Form.Item>
        <Form.Item label='密码' name='password'>
          <Input placeholder='请输入密码' clearable onChange={(v)=>setUser({...user,password:v})}/>
        </Form.Item>
      </Form>

      <Button color='primary' onClick={()=>doLogin()}>登录</Button>

    </div>
  )
}
